<!DOCTYPE html>
<html>
	<head>
	<meta charset="UTF-8">
    
    <title>仿微博评论</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" type="text/css" href="comment.css">
</head>
<body>
<div class="commentAll">
    <!--评论区域 begin-->
    <div class="reviewArea clearfix">
        <div class="flex-text-wrap"><pre class="pre"><span></span><br></pre><textarea class="content comment-input" placeholder="Please enter a comment…" onkeyup="keyUP(this)"></textarea></div>
        <a href="javascript:;" class="plBtn">评论</a>
    </div>
    <!--评论区域 end-->
    <!--回复区域 begin-->
    <div id="commentWrapper" class="comment-show">
        <div id="com" class="comment-show-con clearfix">
            <div class="comment-show-con-img pull-left"><img src="header-img-comment_03.png" alt=""></div>
            <div class="comment-show-con-list pull-left clearfix">
                <div class="pl-text clearfix">
                    <a href="#" class="comment-size-name">张三 : </a>
                    <span class="my-pl-con">&nbsp;来啊 造作啊!</span>
                </div>
                <div class="date-dz">
                    <span class="date-dz-left pull-left comment-time">2017-5-2 11:11:39</span>
                    <div class="date-dz-right pull-right comment-pl-block">
                        <a href="javascript:;" class="removeBlock">删除</a>
                        <a href="javascript:;" class="date-dz-pl pl-hf hf-con-block pull-left">回复</a>
                        <span class="pull-left date-dz-line">|</span>
                        <a href="javascript:;" class="date-dz-z pull-left"><i class="date-dz-z-click-red"></i>赞 (<i class="z-num">666</i>)</a>
                    </div>
                </div>
                <div class="hf-list-con"></div>
            </div>
        </div>
    </div>
    <!--回复区域 end-->
</div>
<script>
    var commentWrapper = document.getElementById("commentWrapper");
    var comment  = document.getElementById("com");
    var btn = document.getElementsByClassName("plBtn")[0];
    btn.onclick = function(){
        var req = new XMLHttpRequest();
        req.open("get", "http://localhost:9090/tweets", true);
        req.onload = function(){
            var msgs = JSON.parse(req.responseText);
            msgs.forEach(item => {
                var newcomt = comment.cloneNode(true);
                newcomt.id = "";
                newcomt.getElementsByClassName("my-pl-con")[0].innerText = item.msg;
                commentWrapper.appendChild(newcomt);
            });
        }
        req.send();
    }
</script>
</body></html>